import classNames from 'classnames';
import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, FC } from 'react';
import './index.less';

export type ButtonSize = 'lg' | 'sm';
export type ButtonType = 'primary' | 'default' | 'danger' | 'link';

interface BaseButtonProps {
  size?: ButtonSize;
  btnType?: ButtonType;
  children: React.ReactNode;
  href?: string;
  disabled?: boolean;
}

type NativeButtonProps = BaseButtonProps &
  ButtonHTMLAttributes<HTMLButtonElement>;
type AnchorButtonProps = BaseButtonProps &
  AnchorHTMLAttributes<HTMLAnchorElement>;

// 定义 Button 组件默认属性类型
interface ButtonDefaultProps {
  btnType?: ButtonType;
}

export type ButtonProps = Partial<
  NativeButtonProps & AnchorButtonProps & ButtonDefaultProps
>;

export const Button: FC<ButtonProps> = (props) => {
  const { btnType, size, children, href, disabled, ...restProps } = props;

  const classes = classNames('btn', btnType, size);
  if (btnType === 'link' && href) {
    return (
      <a className={classes} href={href} {...restProps}>
        {children}
      </a>
    );
  } else {
    return (
      <button
        className={classes}
        disabled={disabled}
        {...restProps}
        type="button"
      >
        {children}
      </button>
    );
  }
};

// 设置 Button 组件的默认属性
Button.defaultProps = {
  btnType: 'primary',
};

export default Button;
